本周最流行的开源低代码编程工具一枚
大家好，我是TJ
关注TJ君，回复“武功秘籍”免费获取计算机宝典书籍
想知道这周GitHub上趋势榜周排名第一的是什么项目吗？
就是这款 面向研发的低代码元编程，代码可视编辑，辅助编码工具
mometa
现在市面上低代码开发工具有很多，但是mometa可能和大多数此类工具不一样，mometa对于吾等程序员来说，在概念上更像一个美工使用dreamweaver的感觉。
来先看看mometa的主要五大特点：
面向研发的代码可视化编辑 可定制团队内物料库 多语言、多生态支持，目前暂只支持 React，后续有计划支持 Vue 接入友好，Webpack>=4 插件化接入 开发友好，物料库支持热更新，不破坏已有开发模式
按作者的说法，mometa 是在基于本地开发的的基础上，新增了可视化编码的能力，所以它不是说你一点代码都不需要懂，而是在你懂代码的基础上，更好的辅助你提升效率，这样解释其定位似乎更合适。
实际的使用界面如下：
使用者也不用担心对低代码平台会形成依赖，二次开发可以无缝进入代码开发模式。
小伙伴们肯定接着好奇，怎么无缝接入呢？
那我们要说说下面两种情况：
就是如果只是从头开始全新的开发，其实就三个步骤。
1、使用团队开发指令，新增一个空的占位路由 & 页面 2、进入 mometa，查看本地物料，和远端物料市场，选中自己需要的物料，直接拖拽，基本成型的页面布局完成 3、进入 ide，完成数据联调，数据传递等，源码开发
但是如果是对已经存在的功能进行优化，只需要：
1、进入 mometa，物料操作插入 2、反向定位直接进入 ide 源码开发
这里所说的反向定位是指支持从视图定位代码位置，就像这样：
下面TJ君再来教你如何快速上手，先下载相关代码：
pnpm install
pnpm run start:app:cr # 开启本地开发预览模式
安装依赖
npm i @mometa/editor -D
安装 antd 物料
npm i @mometa-mat/antd -D
在项目根目录中创建 mometa-material.config.js
module.exports = [require('@mometa-mat/antd').default]
接入编辑器，修改webpack.config.js
const MometaEditorPlugin = require('@mometa/editor/webpack')
module.exports = {
module: {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
// 注意，只需要处理你需要编辑的文件目录
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
}
}
]
},
plugins: [
isEnvDevelopment &&
new MometaEditorPlugin({
react: true,
// 开启物料预览
experimentalMaterialsClientRender: true
})
]
}
这里需要注意一点：
不需要开启官方预设的 react-refresh，记住哦
然后，启动 webpack dev server，开启 http://localhost:${port}/mometa/就可以了。有了这个是不是一下子觉得编码更容易了呢？
小伙伴们可能还想知道mometa实现的原理，TJ君简单和大家一起探讨下。
一个就是React的实现，对于下面这段 React 应用代码：
function App() {
const [list] = React.useState(['p1', 'p2'])
return (
<div>
<h1>Title</h1>
{list.map((text, i) => (
<p key={i}>{text}</p>
))}
</div>
)
}
ReactDOM.render(<App />, window.root)
可以通过 babel 插件 babel/plugin-react，编译时注入 JSX 的元信息 __mometa 至 props 中，包括 colNumber, lineNumber, filename 等；这一步骤就是在编译时提前注入代码元数据。
function App() {
const [list] = React.useState(['p1', 'p2'])
return (
<div
__mometa={{
start: { line: 5, column: 4 },
end: { line: 10, column: 4 },
filename: '/App.tsx',
name: 'div',
text: 'raw text',
// 以及其他数据
}}
>
<h1 __mometa={{...}}>Title</h1>
{list.map((text, i) => (
<p __mometa={{...}} key={i}>{text}</p>
))}
</div>
)
}
更多关于mometa的深入内容，可能需要小伙伴自己体验一下尝试一下才能更好的发掘咯，那么项目的地址在这里：
点击下方卡片，关注公众号“TJ君”
回复“mometa”，获取仓库地址
关注我，每天了解一个牛x、好用、有趣的东东
往期推荐